<template>
  <div class="daiban-bg">
    <div class="daiban-header">工作台</div>
    <van-loading
      v-if="pageLoading"
      type="spinner"
      color="#1677ff"
      size="40px"
      vertical
      class="page-loading"
      >加载中...</van-loading
    >
    <van-search
      v-model="search"
      placeholder="搜索流程名"
      class="daiban-search"
    />
    <van-tabs v-model="active" class="daiban-tabs" color="#1677ff"  sticky>
      <van-tab
        v-for="tab in tabs"
        :key="tab.name"
        :title="tab.title"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="todo-list">
            <div
              class="todo-card"
              v-for="item in todoList"
              :key="item.id"
              @click="goDetail(item)"
            >
              <div class="todo-title-row">
                <div class="todo-title">{{ item.procDefName }}</div>
                <div class="todo-status">
                  <van-tag round :type="getStatusTag(item.flowStatus)">{{
                    getStatusTagText(item.flowStatus)
                  }}</van-tag>
                </div>
              </div>
              <div class="todo-meta-row">
                <img
                  v-if="item.avatar"
                  :src="item.avatar"
                  class="todo-avatar"
                />
                <div v-else class="todo-avatar default-avatar">🐞</div>
                <span class="todo-user">{{ item.startUserName }}</span>
                <span class="todo-dept"
                  ><van-icon name="cluster-o" /> {{ item.dept }}</span
                >
              </div>
              <div class="todo-footer-row">
                <span class="todo-time">{{ item.startTime }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getTodoList } from "@/api/api.js";
export default {
  name: "daiban",
  data() {
    return {
      search: "",
      active: 0,
      tabs: [
        { name: 0, title: "待我处理" },
        { name: 1, title: "已处理的" },
        { name: 2, title: "我发起的" },
        { name: 3, title: "抄送我的" },
      ],
      todoList: [],
      page: 1,
      limit: 10,
      finished: false,
      loading: false,
      pageLoading: false,
    };
  },
  methods: {
    goDetail(item) {
      this.$router.push({
        path: "/flowDetail",
        query: { processInstanceId: item.procInstId, taskId: item.id },
      });
    },
    fetchTodoList() {
      if (this.finished) return;
      if (this.page === 1) this.pageLoading = true;
      this.loading = true;
      getTodoList({
        tab: this.active,
        search: this.search,
        page: this.page,
        limit: this.limit,
      })
        .then((res) => {
          const rows = (res.data && res.data.rows) || [];
          if (this.page === 1) {
            this.todoList = rows;
          } else {
            this.todoList = this.todoList.concat(rows);
          }
          this.finished = rows.length < this.limit;
        })
        .catch(() => {
          this.finished = true;
          this.$toast && this.$toast("加载失败，请下拉重试");
        })
        .finally(() => {
          this.loading = false;
          if (this.page === 1) this.pageLoading = false;
        });
    },
    onLoad() {
      this.page++;
      this.fetchTodoList();
    },
    onRefresh() {
      this.page = 1;
      this.finished = false;
      this.fetchTodoList();
    },
    getStatusTag(status) {
      if (this.active == 0) {
        return "primary";
      } else if (this.active == 1) {
        const statusMap = {
          agree: "success",
          fallback: "danger",
          refuse: "danger",
          revoke: "danger",
          comment: "primary",
          transfer: "primary",
          countersign: "primary",
          handle: "primary",
          delegate: "primary",
        };
        return statusMap[status] || "primary";
      } else {
        const statusMap = {
          ongoing: "primary",
          complete: "success",
          rejected: "danger",
          revoke: "danger",
        };
        return statusMap[status] || "primary";
      }
    },
    getStatusTagText(status) {
      if (this.active == 0) {
        return "待处理";
      } else if (this.active == 1) {
        const statusMap = {
          agree: "已同意",
          fallback: "已回退",
          refuse: "已拒绝",
          revoke: "已撤销",
          comment: "已评论",
          transfer: "已转办",
          countersign: "已加签",
          handle: "已处理",
          delegate: "已委托",
        };
        return statusMap[status] || "已同意";
      } else {
        const statusMap = {
          ongoing: "审批进行",
          complete: "审批完成",
          rejected: "审批驳回",
          revoke: "审批撤销",
        };
        return statusMap[status] || "审批进行";
      }
    },
  },
  watch: {
    active() {
      this.page = 1;
      this.finished = false;
      this.fetchTodoList();
    },
    search() {
      this.page = 1;
      this.finished = false;
      this.fetchTodoList();
    },
  },
  mounted() {
    const typeMap = { todo: 0, mine: 2, cc: 3 };
    if (
      this.$route.query.type &&
      typeMap[this.$route.query.type] !== undefined
    ) {
      this.active = typeMap[this.$route.query.type];
    }
    this.page = 1;
    this.finished = false;
    this.fetchTodoList();
  },
};
</script>
<style scoped>
.daiban-bg {
  background: #f6f8fa;
  padding-bottom: 0;
  position: relative;
  min-height: 100vh;
}
.daiban-header {
  background: #1677ff;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 18px 0 12px 0;
  letter-spacing: 2px;
}
.daiban-search {
  margin: 16px 12px 12px 12px;
  border-radius: 24px;
  background: #fff;
}
.daiban-tabs {
  margin: 0 0 0 0;
}
/deep/ .van-tabs__wrap{
  margin-bottom: 10px!important;
}
.todo-list {
  margin: 0 0 20px 0;
}
.todo-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #1677ff11;
  padding: 14px 16px 10px 16px;
  margin: 0 12px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.todo-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.todo-title {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .todo-status {
  background: #fff4e6;
  color: #ff9800;
  font-size: 13px;
  border-radius: 8px;
  padding: 2px 10px;
  font-weight: 500;
} */
.todo-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.todo-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
  margin-right: 2px;
}
.default-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: #eee;
}
.todo-user {
  font-size: 13px;
  color: #1677ff;
  font-weight: 500;
  margin-right: 2px;
}
.todo-dept {
  font-size: 13px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 2px;
}
.todo-footer-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2px;
}
.todo-time {
  font-size: 13px;
  color: #aaa;
}
.page-loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  pointer-events: auto;
}
</style>
